<template>
	<div class="container">
		<div class="header">
			<h1>音频下载列表</h1>
		</div>
		<div class="content">
			<el-collapse v-model="activeNames" @change="handleChange">
				<el-collapse-item v-for="(item,index) in list" :title='item.title' :name="item.name" :key="item.name">
					<div>{{ item.number }}</div>
					<div>{{item.string}}</div>
				</el-collapse-item>
			</el-collapse>
		</div>
	</div>
</template>

<script>
export default {
	name: "index",
	data(){
		return{
			list:[
				{
					name:'2',
					title:'都市极品村医',
					number:4453,
					string:'dsds'
				},
				{
					name:'3',
					title:'hhh',
					number:4453,
					string:'dsds'
				},{
					name:'4',
					title:'hhh',
					number:4453,
					string:'dsds'
				},{
					name:'5',
					title:'hhh',
					number:4453,
					string:'dsds'
				},
			]
		}
	}
}
</script>

<style scoped lang="scss">
.content{
	width: 30%;
	/deep/ .el-collapse{
		border: none;
		overflow: hidden;
		
	}
	/deep/ .el-collapse-item__header{
		border-bottom:none;
		color: #23527c;
		font-size: 20px;
		.el-collapse-item__arrow{
			margin-left: 10px;
		}
	}
	/deep/ .el-collapse-item__wrap{
		border-bottom:none ;
	}
}
</style>
